<template>
  <div>
    <h2>count:{{ count }}</h2>
    <button @click="editCountHandler">修改count</button>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  data() {
    return {};
  },
  computed: {
    // 没有开启命名空间通过mapState方法获取数据
    ...mapState({
      count: (state) => state.c1.count,
    }),
  },
  methods: {
    ...mapActions(["increment"]),
    ...mapMutations(["INCREMENT"]),
    editCountHandler() {
      // 没有开启命名空间触发数据修改
      // this.$store.dispatch("increment", 20);
      // this.INCREMENT(20);
      this.$store.state.c1.count = 50;
    },
  },
  mounted() {
    // 没有开启命名空间获取数据
    console.log(this.$store.state.c1.count);
  },
};
</script>

<style lang="less" scoped></style>
